<template>
	<el-dialog v-dialogDrag="dialogDragFn" showScale :minWidth="708" :minHeight="702" class="abow-dialog" top="5vh" :visible.sync="visible"
		:close-on-click-modal="false" @open="openVideoDialogFn" :close-on-press-escape="false" width="850px"
		@close="closeVideoDialogFn">
		<el-dialog class="innerDialog" :close-on-click-modal="false" width="500px"
			:title="(downloadName||'')+'  下载进度'" :visible.sync="innerDownloadVisible" append-to-body>
			<div class="d-flex flex-column mx-10">
				<div class="d-flex mb-5" style="font-size: 15px;">下载中，请稍后...</div>
				<el-progress :text-inside="false" :stroke-width="18" text-color="#409eff"
					:percentage="percentage"></el-progress>
				<div style="height: 30px;"></div>
			</div>
		</el-dialog>
		<div slot="title" class="d-flex a-center j-sb dialog-title">
			<span class="d-flex dialog-title-text font-weight" style="font-size: 17px;">{{title||'剧集'}}</span>
			<div class="d-flex flex-1 a-center j-center">
				<el-button class="d-flex switch_url" type="primary" @click="switchUrl()">切换{{typeUrl == 'play_url' ? '原地址' : '压缩地址'}}</el-button>
			</div>
		</div>
		<div class="d-flex flex-row j-sb">
			<div id="messageBox" class="message">
				{{curent == dataForm.length-1?'最后一集播放结束':'播放下一集'}}
			</div>
			<div v-if="!curentUrl"  id="messageBox2" class="message1">
				{{ typeUrl=='play_url' ? '该集没有上传压缩视频':'该集没有上传原视频'}}
			</div>
			<div class="d-flex playerMain" :style="{width:bodywidth/2+'px',height:bodyheight-70+'px'}">
				<d-player id="dplayer" :options="videoOptions" ref="player" @ended="ended"></d-player>
			</div>
			<div class="d-flex" style="width: 30px;"></div>
			<div class="play-box d-flex flex-wrap" :style="{width:bodywidth/2+'px',height:bodyheight-70+'px'}">
				<div v-for="(item,index) in dataForm" :key="index" class="play-item"
					:class="{'active-item':curent==index}" @click.stop="clickVideo(item,index)">
					{{item.playlet_number}}
				</div>
			</div>
		</div>
		
		<template slot="footer">
			<div class="d-flex a-center j-sb">
				<el-button type="primary" @click="preVideo">上一集</el-button>
				<el-button v-if="dataForm.length" @click="downloadVideo" type="primary">下载视频</el-button>
				<el-button type="primary" @click="nextVideo">下一集</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	let that;
	import * as clipboard from 'clipboard-polyfill'
	import VueDPlayer from '@/libs/vue-dplayer';
	require("/src/assets/style/vue-dplayer.css");
	export default {
		components: {
			'd-player': VueDPlayer
		},
		data() {
			return {
				bodywidth:850,
				bodyheight:680,
				curentUrl:'',
				typeUrl: 'play_url', //wx_original_url小程序  play_url原上传剧集
				title: '',
				downloadName: '', //正在下载的剧集名称
				playlet_number_name: '', //第几集
				curent: 0,
				innerDownloadVisible: false, //是否显示下载视频进度
				percentage: 0, //下载视频进度
				videoOptions: {
					video: {
						url: '', //视频链接
						pic: '', //封面图
						thumbnails: '', //缩略图
					},
					theme: '#409eff', //主题色
					screenshot: true, //是否支持截图
					autoplay: true, //是否自动播放
					preload: 'auto', //预加载
					contextmenu: [{
							text: '下载视频',
							click: (e) => {
								this.downloadVideo();
							}
						},
						{
							text: '复制视频地址',
							click: (e) => {
								if (this.dataForm.length) {
									if (this.dataForm.length >= this.curent) {
										this.copyText(this.dataForm[this.curent][this.typeUrl]);
										return;
									}
								}
								this.$message({
									message: '复制失败！视频地址为空！',
									type: 'error',
									duration: 1500
								})
							}
						},
					]
				},
				player: '',
				visible: false,
				dataForm: []
			}
		},
		created() {},
		mounted() {
			that = this;
		},
		computed: {
			// getcurentUrl :function(){
			// 	if(that.dataForm){
			// 		let currentUrl = that.dataForm[that.curent][that.typeUrl]
			// 		return currentUrl=='' ? true : false
			// 	}
			
			// }
		},
		watch: {
			innerDownloadVisible(newVal) {
				this.player = this.$refs.player.dp;
				if (newVal) {
					this.player.pause();
				} else {
					this.player.play();
				}
			}
		},
		methods: {
			switchUrl(){
				
				let typeUrl = this.typeUrl;
				typeUrl == 'play_url' ? this.typeUrl = 'original_play_url' : this.typeUrl = 'play_url';
				this.player.switchVideo({
					url: this.dataForm[this.curent][this.typeUrl],
					pic: this.dataForm[this.curent].cover
				});
				this.curentUrl = this.dataForm[this.curent][this.typeUrl]
				this.player.play();
			
				console.log(116,this.typeUrl)
			},
			ended() {
				console.warn('播放结束=======');
				let messageBox = document.getElementById('messageBox');
				messageBox.classList.add('show');
				setTimeout(()=>{
					messageBox.classList.remove('show');
				},2000);// 3秒后隐藏消息提示
				setTimeout(()=>{
					this.nextVideo(true);
				},800);
			},
			copyText(text) {
				console.log(text);
				if (!text) {
					return that.$message({
						message: '数据为空，无法复制！',
						type: 'error',
						duration: 1500
					})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			openVideoDialogFn() {
				if (this.player) {
					if (this.curent != 0) {
						this.curent = 0;
						this.player.switchVideo({
							url: this.dataForm[this.curent][this.typeUrl],
							pic: this.dataForm[this.curent].cover
						});
						
					}
				}
			},
			closeVideoDialogFn() {
				console.log(this.player);
				if (this.player) {
					this.player.pause();
					this.player.seek(0);
				}
			},
			dialogDragFn(e){
				if(e){
					console.log(e);
					if(e.bodywidth){
						this.bodywidth = e.bodywidth;
					}
					if(e.bodyheight){
						this.bodyheight = e.bodyheight;
					}
				}
			},
			async downloadVideo() {
				this.innerDownloadVisible = true;
				if (this.percentage != 0) {
					that.$message({
						message: `请等待${this.downloadName}下载完`,
						type: 'error',
						customClass: 'messageClass',
						duration: 2000,
					})
					this.innerDownloadVisible = true;
					return
				}
				this.downloadName = this.title + ' ' + this.dataForm[this.curent].playlet_number_name;
				let play_url = (this.dataForm[this.curent][this.typeUrl]).replace("http://", "https://"),
					index = play_url.lastIndexOf("."),
					download_name = this.downloadName + (play_url.substring(index, play_url.length));
				try {
					let x = new XMLHttpRequest();
					x.open("GET", play_url, true);
					x.addEventListener("progress", function(evt) {
						if (evt.lengthComputable) {
							let percentComplete = evt.loaded / evt.total;
							that.percentage = Math.floor(percentComplete * 100);
							if (that.percentage == 100) {
								that.innerDownloadVisible = false;
								that.percentage = 0;
								that.$message({
									message: `${that.downloadName||'视频'}下载成功！`,
									type: 'success',
									duration: 2000
								})
							}
						}
					}, false);
					x.responseType = 'blob';
					x.onload = function(e) {
						//会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
						let url = window.URL.createObjectURL(x.response),
							a = document.createElement('a');
						a.href = url
						a.download = download_name;
						a.click();
						a.remove();
					}
					x.send();
				} catch (error) {
					that.innerDownloadVisible = false;
					that.percentage = 0;
					that.$message({
						message: '下载视频失败！',
						type: 'error',
						duration: 2000,
					})
					console.error(error);
				}
			},
			preVideo() {
				this.player = this.$refs.player.dp;
				if (this.player) {
					if (this.curent == 0) return;
					this.curent -= 1;
					this.player.switchVideo({
						url: this.dataForm[this.curent][this.typeUrl],
						pic: this.dataForm[this.curent].cover
					});
					this.curentUrl = this.dataForm[this.curent][this.typeUrl]
					this.player.play();
					console.log(this.curent);
				}
			},
			nextVideo() {
				this.player = this.$refs.player.dp;
				if (this.player) {
					if (this.curent == this.dataForm.length - 1) return;
					this.curent += 1;
					this.player.switchVideo({
						url: this.dataForm[this.curent][this.typeUrl],
						pic: this.dataForm[this.curent].cover
					});
					this.curentUrl = this.dataForm[this.curent][this.typeUrl]
					this.player.play();
					
					console.log(this.curent);
				}
			},
			clickVideo(item, index) {
				this.curent = index;
				console.log(this.player);
				this.player.switchVideo({
					url: item[this.typeUrl],
					pic: item.cover
				});
				
				this.curentUrl = item[this.typeUrl]
				console.log(282,item[this.typeUrl])
				this.player.play();
			},
			update(row) {
				//第一集
				if (this.typeUrl == 'wx_original_url') {
					this.videoOptions.video.type = 'hls';
					// this.videoOptions.video.customType = {
					// 	customHls: function (video, player) {
					// 		const hls = new Hls();
					// 		hls.loadSource(video.src);
					// 		hls.attachMedia(video);
					// 	}
					// };
				}
				this.videoOptions.video.url = row[0][this.typeUrl];
				this.videoOptions.video.pic = row[0].cover;
				this.visible = true;
				this.$nextTick(() => {
					this.dataForm = row;
					this.player = this.$refs.player.dp;
					this.player.switchVideo({
						url: row[0][this.typeUrl],
						pic: row[0].cover
					});
					// item[this.typeUrl]
					this.curentUrl = row[0][this.typeUrl]
					setTimeout(() => {
						this.player.play();
					}, 10)
					console.log(this.dataForm);
					this.playlet_number_name = this.dataForm[this.curent].playlet_number_name;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 540px;
	}

	.message {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: black;
		color: white;
		padding: 16px;
		border-radius: 4px;
		z-index: 9999;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s, opacity 0.5s linear;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}
	.message1 {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: black;
		color: white;
		padding: 16px;
		border-radius: 4px;
		z-index: 9999;
		visibility: visible;
		opacity: 1;
		transition: visibility 0s, opacity 0.5s linear;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		animation-name: diyname;
		animation-duration: 1000;
	}
	@keyframes diyname{
		0%{
			visibility:hidden;
			opacity:0;
		}
		100%{
			visibility:visible;
			opacity:1;
		}
	}

	.message.show {
		visibility: visible;
		opacity: 1;
	}

	:deep(.center-message) {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	:deep(.el-dialog__header) {
		padding: 20px !important;
	}

	:deep(.el-dialog__body) {
		padding: 0px 20px 0px 20px !important;
	}

	:deep(.el-dialog__headerbtn) {
		font-size: 25px !important;
	}

	.playerMain {
	}

	.play-box {
		align-content: flex-start;
		overflow: auto;

		.play-item {
			border: 1px solid #858585;
			margin-right: 14px;
			cursor: pointer;
			border-radius: 5px;
			align-items: center;
			justify-content: center;
			width: 58px;
			height: 38px;
			margin-bottom: 15px;
			display: flex;
			font-size: 15px;
		}

		.active-item {
			border: 1px solid #007dff;
			background-color: #007dff;
			color: #fff;
		}
	}
	.dialog-title{
		position: relative;
		.switch_url{
			border-radius: 4px;
			width: 120px;
			height: 30px;
			color: #FFF;
			background-color: #409EFF;
			border-color: #409EFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	:deep(.el-dialog__footer){
		padding: 15px 20px!important;
	}
</style>